<template>
  <div class="person-style">
    <van-nav-bar title="消息" fixed />
    <div class="content-top">
      <!-- 关注微信 -->
      <div class="note-weixin" v-if="show_gzh_tip === true">
        <div class="box">
          <van-icon name="clear" color="#e8e8e8" size="18" style="position: absolute; top: 9px; right: 9px" @click="show_gzh_tip = false" />
          <p>
            <b>关注微信公众号，求职信息实时接收！</b>
            <span>1.登录通知&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.面试通知&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.谁看过我</span>
          </p>
          <van-button block round type="primary" text="关注公众号" color="#05A6F0" style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 32px;
              padding: 0;
              margin: 12px 0 13px;
              font-size: 16px;
              line-height: 32px;
            " @click="onGZH"></van-button>
        </div>
      </div>

      <!-- 聊天列表 -->
      <van-list class="note-list" v-if="isLogin === true && list.length > 0">
        <van-swipe-cell class="note-item" v-for="(item, index) in list" :key="index">
          <div class="item-show" :class="{ dot: !item.isPersonRead }" @click="onItemClick(item, index)">
            <img :src="item.companyLogo" alt="" v-if="item.companyLogo != null && !item.isFromAdmin" />
            <img src="@/assets/img/firm_default_avatar.png" alt="" v-if="item.companyLogo === null && !item.isFromAdmin" />
            <img src="@/assets/img/system_avatar.png" alt="" v-if="item.isFromAdmin" />
            <dl>
              <dt>
                <b>{{ item.companyName }}</b>
                <span>{{ item.dateStr }}</span>
              </dt>
              <dd>
                <span v-if="item.lastText && item.lastText.indexOf('/upload/IMImage') >= 0">[图片]</span>
                <span v-else>{{ item.lastText }}</span>
              </dd>
            </dl>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" style="height: 100%" @click="onDel(item.cid, index)" />
          </template>
        </van-swipe-cell>
      </van-list>

      <div class="note-login" v-else-if="isLogin == false">
        <span>您需要登录才可查看更多信息</span>
        <van-button round type="primary" text="登录" @click="onToLogin" />
      </div>

      <van-empty v-else-if="list.length == 0" description="尚未有与企业的聊天对话"></van-empty>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, Button, List, SwipeCell, Dialog, Toast, Empty } from "vant";
import { checkPersonLogin } from "@/util/session";
import { mixin_person_tologin } from "@/mixin/mixins";
import Global from '@/Global';
import myJmessage from '@/util/myJmessage';
export default {
  name: "IMIndex",
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [List.name]: List,
    [SwipeCell.name]: SwipeCell,
    [Empty.name]: Empty,
  },
  mixins: [mixin_person_tologin],
  mounted() {
    if (this.isLogin) { this.onLoad(); }
    this.$bus.$on(Global.bus_person_login, (res) => {
      this.isLogin = res;
      this.onLoad();
    });
		//已读聊天
    this.$bus.$on(Global.bus_person_im_message_read,()=>{
    	this.onLoad();
    });
		//已发送消息
		this.$bus.$on(Global.bus_person_im_sendmessage,()=>{
			this.onLoad();
		})
		//收到消息
		this.$bus.$on(Global.bus_pereson_im_message_receive_OutPage,()=>{
			this.onLoad();
		})
  },
  // 定义属性
  data() {
    return {
      isLogin: checkPersonLogin(),
      show_gzh_tip: true,
      list: [],
    };
  },
  // 方法集合
  methods: {
    onLoad() {
      this.$api.get('/PersonIM/GetPersonIMConversationList').then(res => {
        if (res.success) {
          this.list = res.response;
        }
      })
    },
    onDel(cid, index) {
      Dialog.confirm({ message: "确认删除该会话么？", }).then(() => {
        this.$api.post('/PersonIM/DeleteIMConversationByPerson?cid=' + cid).then(res => {
          if (res.success) {
            this.list.splice(index, 1);
          }
          else { Toast.fail(res.msg) }
        })
      })
    },
    onItemClick(item, index) {
      console.log(item, index);
      item.personRead = 1;
      this.list.splice(index, 1, item);
      this.$router.push({
        name: "person-im",
        query: { cid: item.cid, companyID: item.companyID, isFromAdmin: item.isFromAdmin },
      });
    },
    //关注公众号
    onGZH() {
      this.$router.push({ name: "person-wxgzh" });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

/* 关注公众号 */
.person-style .note-weixin {
  display: flex;
  flex-direction: column;
  padding: 15px 15px 20px;
  background-color: #fff;
}

.person-style .note-weixin .box {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 25px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

.person-style .note-weixin p {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.person-style .note-weixin p b {
  padding: 14px 0 6px;
  font-size: 16px;
  color: #000;
}

.person-style .note-weixin p span {
  font-size: 13px;
  color: #aaa;
}

/* 登录 */
.person-style .note-login {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 84%;
}

.person-style .note-login span {
  font-size: 16px;
  color: #666;
}

.person-style .note-login button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 34px;
  padding: 0;
  border: none;
  margin-top: 15px;
  background-color: #05a6f0;
}

.person-style .note-login button span {
  font-size: 17px;
  color: #fff;
}

/* 消息列表 */
.person-style .note-list {
  padding-bottom: 50px;
}

.person-style .note-list .note-item {
  position: relative;
  background-color: #fff;
}

.person-style .note-list .note-item::after {
  content: "";
  position: absolute;
  left: 80px;
  bottom: 0;
  right: 0;
  height: 0.5px;
  background-color: #e8e8e8;
}

.person-style .note-list .item-show {
  display: flex;
  padding: 15px;
}

.person-style .note-list .item-show.dot {
  position: relative;
}

.person-style .note-list .item-show.dot::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 59px;
  z-index: 10;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ee0a24;
}

.person-style .note-list .item-show img {
  display: flex;
  width: 47px;
  height: 47px;
  border: 0.5px solid #e8e8e8;
  border-radius: 5px;
}

.person-style .note-list .note-item dl {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  height: 48px;
  margin: 0 0 0 16px;
  overflow: hidden;
}

.person-style .note-list .note-item dl dt {
  display: flex;
  align-items: center;
}

.person-style .note-list .note-item dl dt b {
  display: -webkit-box;
  flex: 1;
  font-size: 16px;
  color: #333;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.person-style .note-list .note-item dl dt span {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 120px;
  font-size: 14px;
  color: #b5b5b5;
}

.person-style .note-list .note-item dl dd {
  display: flex;
  margin: 0;
}

.person-style .note-list .note-item dl dd span {
  font-size: 14px;
  color: #b5b5b5;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
